import React, {useState, useEffect} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

function Index(){
  useEffect(()=>{
    console.log('来了Index页面')
    return ()=>{
      console.log('离开Index页面')
    }
  }, [])
  return <h2>zhaozb</h2>
}
function List(){
  useEffect(()=>{
    console.log('来了List页面')
    return ()=>{
      console.log('离开List页面')
    }
  }, [])
  return <h2>List</h2>
}

function ExampleHook4(){
  const [count, setCount] = useState(0)
  useEffect(()=>{ // 等于componentDidMount + componentDidUpdate，且是异步的，解决hook没有生命周期的问题
    console.log(`useEffect=>You clicked ${count} times`)
    return ()=>{
      console.log("==================")
    }
  }, [count])
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=>{setCount(count+1)}}>click me</button>
      <Router>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/list">列表</Link></li>
        </ul>
        <Route path="/" exact component={Index}/>
        <Route path="/list" exact component={List}/>
      </Router>
    </div>
  )
}
export default ExampleHook4